
/*多列样式*/
#longTxt{       
    background-color:#d1d0c8;    
    width:768px;
    height:100px;   
    border:1px solid #ff0000;
    column-count:3;/*把div拆分为3列*/
    column-gap:25px;/*列与列之间的间距*/
    column-rule:1px solid #00ff00; /*设置列与列间的分割线样式*/
    column-width:100px; /*只需要单独设置该列属性,div会根据自身宽度自动平均分成若干列*/
    animation:action1 1s;
    animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes action1{
    to{
        transform:translateY(10px) scale(0.85);
    }
}
/*当鼠标覆盖时,用户可以自己调整div尺寸*/
#longTxt:hover{
    resize:both;
    overflow:auto;/*必须指定overflow属性*/
}  


#myimg{
    transform:scale(0.5);
}
#myimg:hover{
    cursor:pointer;
}

#photos{ 
    max-width:100%;/*自适应分辨率大小*/
    height:auto;
    background-image:url("../img/trolltunga.jpg");
    background-size:1000px 300px; 
    background-repeat:no-repeat;   
}
.imgFilter1{
    -webkit-filter: grayscale(100%) blur(1px); /* Chrome, Safari, Opera */
    filter:grayscale(100%) blur(1px); /*灰度滤镜,高斯模糊*/
}
.imgFilter2{
    -webkit-filter:brightness(50%) contrast(2); /*设置亮度:正常是100%,设置对比度:正常是100%*/
    filter:brightness(50%) contrast(0); /*设置亮度:正常是100%*/
}
.imgFilter3{
    -webkit-filter:invert(1) drop-shadow(3px 3px 5px #ff0000); /*颜色反相图像*/    
}

.myModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}


.showImg{    
    text-align:center;
    vertical-align:center;
}


#modal span{
    font-size:40px;
    position:relative;
    top:50px;
    left:1170px;
    overflow: auto;
}
#modal span:hover{
    cursor:pointer;
}

.btn1{
    position:relative;
    top:64px;
    width:120px;
    height:60px;
    border-radius:4px;
    background-color:#f6c87b;
    border: none; /*去掉正常显示的边框*/
    font-size:20px;
    outline: none;/*去掉点击时候的轮廓边框*/
    box-shadow:0px 5px 5px #cccccc;
    transition:all 0.2s;
}
.btn1:active {
    transform:translate(2px,2px);
    box-shadow:0px 2px 5px #cccccc;
}
.btn1:hover{
    cursor:pointer;
}

.btn1:after{
    background-color:#ff0000;
    border-radius:4px;
    opacity:0;
    content:"";
    width:120px;
    height:60px;
    display: block;
    position: absolute;   
    margin-left:-5px!important;
    margin-top: -35%;
    transform:scale(0);
    transition:all 0.2s;
    
}
.btn1:hover:after{
    opacity:0.5;   
    transform:scale(1);
}

















